{include file="public/header" /}
<style>
.btn-box{padding:10px 0 20px 0;text-align:right}
</style>
</head>
<body>
<div id="box" v-cloak class="box">
	<div class="btn-box">
		<el-button type="primary" size="small" icon="el-icon-plus" @click="add()">添加文章</el-button>
	</div>
	<el-table size="mini" border style="width: 100%" :data = 'list.data'>
		<el-table-column type="index" width="50"></el-table-column>
		<el-table-column label="标题" prop="title" width="400"></el-table-column>
		<el-table-column label="内容" prop="content"></el-table-column>
		<el-table-column label="浏览量" prop="see_num" width="100"></el-table-column>
		<el-table-column label="时间" prop="create_time" width="200"></el-table-column>
		<el-table-column label="操作" width="300"></el-table-column>
	</el-table>
	<el-pagination class="pages" background
		@size-change="handleSizeChange"
      	@current-change="handleCurrentChange"
      	:current-page="list.per_page.current_page"
      	:page-size="list.per_page"
      	layout="prev, pager, next, jumper"
      	:total="list.total">
    </el-pagination>
</div>
<script>
new Vue({
	el : '#box',
	data:{
		list:{$list | raw},
	},
	mounted:function(){
	},
	methods:{
		add:function(){
			layer.open({
				type: 2,
			  	title: '添加文章',
			  	shadeClose: true,
			  	offset: 'r',
			  	area: ['100%', '100%'],
			  	content: '{:url("addArticle")}' //iframe的url
			}); 
		},
		getData:function(page){
			var that = this;
			$.post("{:url('index')}",{page:page},function(res){
				if (res.code) {
					that.list = res.msg;
				}
			});
		},
		handleSizeChange:function(e){
			this.getData(e);
		},
		handleCurrentChange:function(e){
			this.getData(e);
		},
	}
});
</script>
</body>
</html>